<template>
  <div class="notifications__user-message">
    <Notice-list
      type="userMessage"
      :data="userMessage"
      @page-change="onPageChange"
    >
      <template slot-scope="{ data }">
        <User-message-item :data="data" type="userMessage"/>
      </template>
    </Notice-list>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import NoticeList from './List'
import UserMessageItem from './UserMessageItem'

export default {
  name: 'UserMessage',
  components: { NoticeList, UserMessageItem },
  computed: {
    ...mapGetters({
      userMessage: 'notify/userMessage'
    })
  },
  created () {
    this.$store.dispatch('notify/fetchUserMessages')
  },
  methods: {
    async onPageChange ({ page, onSuccess }) {
      await this.$store.dispatch('notify/fetchUserMessages', { page })
      onSuccess()
    }
  }
}
</script>

